
<!--  -->
<template>
  <div>
    <div class="header">
      <img src="/static/images/spring.png" mode="widthFix"/>
      <div class="am-form">
        <!-- <input @input="changeName" name="title" type="text" class="am-round" placeholder="搜索粘贴商品标题抢优惠券~" autocomplete="off"> -->
        <input @input="changeName" name="title" type="text" class="am-round" placeholder="搜索全网商品" autocomplete="off">
        <div class="fq-searchbtn" @tap="searchGood">搜索</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: ''
    }
  },

  components: {},

  methods: {
    changeName (e) {
      this.keyword = e.target.value
    },
    searchGood () {
      let param = {
        url: '/api/superkeyword',
        q: {
          keyword: this.keyword,
          back: '20'
        }
      }
      wx.navigateTo({
        url: '../market/market?param=' + JSON.stringify(param)
      })
    }
  }
}

</script>
<style lang='less'>

  .header{
    position: relative;
    width: 100%;
      image{
        width: 100%;
    }
    .am-form{
      position: absolute;
      bottom: 15%;
      width: 100%;
      display: flex;
      justify-content: center;
      input{
        background:#EEF0FF;
        align-items: center;
        min-width: 60%;
        padding: 0 60px 0 30px;
        border:  none;
        outline: none;
        box-shadow: 0 2px 6px 0 rgba(134, 124, 255, .4);
        height: 40px;
        font-size: 14px;
        border-radius: 1000px;
      }
      .fq-searchbtn{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 22px;
        top: 0;
        height: 40px;
        width: 60px;
        color: white;
        background: #EE7951;
        border-radius: 0 1000px 1000px 0;
        padding-right: 4px;
      }
    }
  }


</style>